<template>
  <div class="theme-active-text-color">
    <search-table-template tableTitleTxt='记录列表'>
      <template slot="tableTitleRight">
        <el-button type="primary" @click="download">下载表格</el-button>
      </template>
        <template slot="tableContent">
          <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="goods_id"
            label="材料id"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="材料名称"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="count"
            label="采购总量"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="price"
            label="采购单价"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="merchant"
            label="采购商家"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="complete"
            label="申请进度"
            align="center"
            >
            <template slot-scope="scope">
                <span>{{ scope.row.complete | completefilter}}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
              <el-button class="btn" @click="toProcess(scope.row.id,scope.row.goods_id)" type="text" size="small">申请进度</el-button>
              <el-button  type="text" size="small" @click="recall(scope.row.id)">撤回</el-button>   
            </template>
          </el-table-column>
        </el-table>
        <pagination
            :pageData="pageData"
            @onSearch="paginationSearch(arguments)"
        ></pagination>
        </template>
    </search-table-template>
  </div>
</template>

<script>
import SearchTableTemplate from '../../components/template/SearchTableTemplate.vue';
import Pagination from "@/components/Pagination";
import { applyListApi,recallApplyApi } from '@/api';
import fileExport from "@/utils/fileExport";

export default {
  name: "",
  components: {
    SearchTableTemplate,
    Pagination
  },
  data() {
    return {
      tableData:[],
      pageData: {
        pageNum: 1,
        pageSize: 20,
        pageTotal: 50,
        currentPage: 1
      },
    };
  },
  created() {
    this.getGoodsList()
  },
  filters:{
    completefilter:function(val){
      switch (val){
        case 0:return '采购部'
        case 1: return "成本部"
        case 2: return "商务部"
        case 3: return "总助"
        case 4: return "副总"
        case 5: return "总经理"
        case 6: return "完成"
        default:
          return val
      }
    }
  },
  methods: {
    async getGoodsList(){
      let res = await applyListApi();
      if(res){
        console.log("res",res)
        this.tableData = res.data
      }
    },
    toProcess(id,goods_id){
      this.$router.push({
        path:'applyProcess',
        query:{
          id:id,
          goodsId:goods_id
        }
      })
    },

    async recall(id){
      let res = await recallApplyApi({
        id:id
      })
      if(res){
        console.log('撤回',res)
        this.$message({
            message: '撤回成功',
            type: 'success'
          });
        this.getGoodsList()
      }
    },
    
    paginationSearch(data) {
      this.pageData.pageSize = data[1];
    },

    download(){
      fileExport('goods.xlsx',{},'/download')
    }
  }
};
</script>
<style lang="less" scoped>
.goods_img{
  width: 80%;
}
.btn{
  padding-right: 10px;
}

</style>
